<script setup lang="ts">
import { createAddress, getAddressDetailAPI, updateAddressAPI } from '@/services/address'
import { useMemberStore } from '@/stores'
import type { Address } from '@/types/address'
import { http } from '@/utils/http'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
//获取页面参数，获取从上一个页面传递过来的id参数
const query = defineProps<{
  id: number
}>()
//动态设置标题
uni.setNavigationBarTitle({ title: query.id ? '修改地址' : '新建地址' })
const memberInfo = useMemberStore().profile
//表单数据
const form = ref<Address>({
  id: 0,
  userId: 0,
  userName: '',
  telNumber: '',
  fullLocation: '',
  province: '',
  city: '',
  detail: '',
  district: '',
  isDefault: 0,
})
//收集所在地区
const onRegionChange: UniHelper.RegionPickerOnChange = (e) => {
  form.value.fullLocation = e.detail.value.join(' ')
  const [province, city, district] = e.detail.code!
  Object.assign(form.value, { province, city, district })
}

//提交表单
const onSubmit = async () => {
  //调用函数发送ajax请求
  form.value.userId = memberInfo.id
  let res //响应对象
  if (query.id) {
    res = await updateAddressAPI(form.value)
  } else {
    res = await createAddress(form.value)
  }
  if (res.code === 200) {
    //成功提示
    uni.showToast({
      title: res.msg,
      icon: 'success',
    })
    //跳转到上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 400)
  } else {
    uni.showToast({
      title: res.msg,
      icon: 'error',
    })
  }
}

const onSwitchChange: UniHelper.SwitchOnChange = (e) => {
  form.value.isDefault = e.detail.value ? 1 : 0
}

const getAddressDetail = async () => {
  //如果传递过来的id不为空的话，说明是修改地址，需要请求接口获取地址详情
  if (query.id) {
    const res = await getAddressDetailAPI(query.id)
    Object.assign(form.value, res.result)
  }
}
//在页面加载时，调用
onLoad(() => {
  getAddressDetail()
})
</script>

<template>
  <view class="content">
    <form>
      <!-- 表单内容 -->
      <view class="form-item">
        <text class="label">收货人</text>
        <input class="input" placeholder="请填写收货人姓名" v-model="form.userName" />
      </view>
      <view class="form-item">
        <text class="label">手机号码</text>
        <input class="input" placeholder="请填写收货人手机号码" v-model="form.telNumber" />
      </view>
      <view class="form-item">
        <text class="label">所在地区</text>
        <picker
          class="picker"
          mode="region"
          :value="form.fullLocation.split(' ')"
          @change="onRegionChange"
        >
          <view v-if="form.fullLocation">{{ form.fullLocation }}</view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">详细地址</text>
        <input class="input" placeholder="街道、楼牌号等信息" v-model="form.detail" />
      </view>
      <view class="form-item">
        <label class="label">设为默认地址</label>
        <Switch
          class="switch"
          color=" #3c69dc"
          :checked="form.isDefault == 1"
          @change="onSwitchChange"
        />
      </view>
    </form>
  </view>
  <!-- 提交按钮 -->
  <button class="button" @tap="onSubmit">保存并使用</button>
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx 40rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #3c69dc;
}
</style>
